<template>
  <div class="home">
    <div class="mt-20">
      <van-row justify="space-around" gutter="20">
        <van-col span="6">
          <img src="@/static/images/logo.png" alt="" class="logo" />
        </van-col>
        <van-col span="14">
          <!-- <van-icon name="search" /> -->
          <div class="sousuo" @click="gotoSearch">
            <svg class="icon sousuo1" aria-hidden="true">
              <use xlink:href="#icon-sousuo"></use>
            </svg>
            <input type="text" placeholder="搜索商品,共122245款好货" />
          </div>
        </van-col>
        <van-col span="4">
          <button class="button" @click="gotoLogin">登录</button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Grid, GridItem } from 'vant'

// 导入vue-router
import { useRouter } from 'vue-router'
// 获取实例
const router = useRouter()
// 点击登录按钮回调
const gotoLogin = () => {
  // console.log(11111)
  router.push('/login')
}

// 点击搜索框去搜索页面
const gotoSearch = ()=>{
  router.push('/search')
}
</script>

<style scoped>
.mt-20 {
  margin-top: 10px;
}
.button {
  width: 40px;
  height: 23px;
  border: 1px solid red;
  color: red;
  border-radius: 5px;
}
.logo {
  width: 80px;
  height: 20px;
  margin: 0 15px;
}

.sousuo {
  display: flex;
  border: 1px solid #000;
  line-height: 20px;
}

.sousuo input {
  border: 0px;
}

.sousuo1 {
  width: 20px;
  height: 20px;
  line-height: 20px;
}
</style>
